<!DOCTYPE html>
<html>
<head>
  <title>标题</title>
  <meta content="no-cache" http-equiv="pragma">
  <meta content="no-cache" http-equiv="cache-control">
  <meta content="0" http-equiv="expires">
  <meta content="keyword1,keyword2,keyword3" http-equiv="keywords">
  <meta content="This is my page" http-equiv="description">

  <link href="/Css/bootstrap.css" rel="stylesheet" type="text/css"/>
  <link href="/Css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/>
  <link href="/Css/style.css" rel="stylesheet" type="text/css"/>
  <link href="/My97DatePicker/skin/WdatePicker.css" rel="stylesheet" type="text/css"/>

  <script src="/bui/assets/js/jquery-1.8.1.min.js" type="text/javascript"></script>
  <script src="/My97DatePicker/WdatePicker.js" type="text/javascript"></script>

  <script type="text/javascript">
    function sub(id) {
      var date = $('#date' + id).val();
      var type = $('#type' + id).val();
      var typeDetail = $('#typeDetail' + id).val();
      var price = $('#price' + id).val();
      var description = $('#description' + id).val();
      if (date == null || date == "") {
        alert("请输入正确的消费时间！");
        return false;
      }
      var reg = /^\-?[0-9]*\.?[0-9]*$/;
      if (price == "" || !reg.test(price)) {
        alert("请输入正确的消费金额！");
        return false;
      }
      var param = {
        "consumeDate": date,
        "tId": type,
        "price": price,
        "tDId": typeDetail,
        "description": description
      };

      $.post("/account/add", param, function (data) {
        if (data.code == 200) {
          $('#ok' + id).css('display', 'block')
          new timer(1000, 'ok' + id).start();
        } else {
          $('#no' + id).css('display', 'block');
          new timer(1000, 'no' + id).start();
        }
      }, "json");
    };

    //************定时器任务对象，执行任务之后，自动关闭定时器 *********************
    // 创建定时器对象
    function timer(second, id) {
      this.second = second;//设置定时器时间
      this.id = id;//操作对象的id
    }

    // 为这个定时器添加一个原型方法
    timer.prototype.start = function () {
      var demoid = this.id;
      var tid = setInterval(function () {
        $('#' + demoid).fadeTo('slow', 0, function () {
          $('#' + demoid).css('opacity', '1');
          $('#' + demoid).css('display', 'none');
          clearInterval(tid);
        });
      }, this.second);
    }

    $(function () {
      $('#CommonDate').bind('click', function () {
        WdatePicker({
          onpicked: function (dp) {
            $('input[name=date]').val(dp.cal.getNewDateStr())
            return true;
          }
        });
      });
    })

    function addTyppeDetail(btn) {
      $("#addDetailView").show();
      var typeIdName = btn.value;
      let strings = typeIdName.split(",");
      var id = strings[0];
      var name = strings[1];
      $('#addTypeId').val(id);
      $('#addTypeName').val(name);
    }

    function submitDetail() {
      var tId = $('#addTypeId').val();
      var typeDetailName = $('#typeDetailName').val();

      var param = {
        "tId": tId,
        "name": typeDetailName
      };

      $.post("/account/addDetail", param, function (data) {
        alert(data.msg);
        if (data.code == 200) {
          window.location.reload();
        }
      }, "json");

      return true;
    }

  </script>
  <style>
    input, select {
      width: 90%;
    }

    td {
      vertical-align: middle;
    }

  </style>

</head>
<body>
<table class="table table-bordered table-hover definewidth m10" id="but"
       style="width: 80%; text-align: center">
  <tr>
    <th style="text-align: center;font-size: 24px;line-height:30px;height: 30px; ">
      每日消费随记
    </th>
  </tr>
</table>
<table class="table table-bordered table-hover definewidth m10">
  <thead>
  <tr>
    <th style="width: 5%;">公共属性</th>
    <th style="width: 10%;">消费时间</th>
    <th style="width: 10%;">类别</th>
    <th style="width: 15%;">详情</th>
    <th style="width: 10%;">消费金额</th>
    <th style="width: 15%;">描述</th>
    <th style="width: 10%;">操作</th>
    <th style="width: 10%;">状态</th>
  </tr>
  <tr>
    <td></td>
    <td>
      <input class="Wdate" id="CommonDate"
             name="CommonDate" th:value="${today }"
      />
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th>编号</th>
    <th>消费时间</th>
    <th>类别</th>
    <th>详情</th>
    <th>消费金额</th>
    <th>描述</th>
    <th>操作</th>
    <th>状态</th>
  </tr>
  </thead>
  <tr th:each="baseType,iterStat : ${types}">
    <td th:text="${iterStat.count}"></td>
    <td>
      <input class="Wdate"
             name="date"
             onfocus="WdatePicker()"
             th:id="'date' + ${iterStat.count }" th:value="${today }"
      />
    </td>
    <td>
      <select disabled="disabled" name="type" th:id="'type' + ${iterStat.count }">
        <option
            th:each="type : ${types}"
            th:selected="${baseType.id == type.id} ? 'true' : 'false' "
            th:text="${type.name }"
            th:value="${type.id }"
        ></option>
      </select>
    </td>
    <td>
      <select name="typeDetail" style="width: 75%;" th:id="'typeDetail' + ${iterStat.count }">
        <option value="">====请选择详情====</option>
        <option
            th:each="typeDetail : ${baseType.details}"
            th:selected="${baseType.defaultTdId == typeDetail.id} ? 'true' : 'false' "
            th:text="${typeDetail.name }"
            th:value="${typeDetail.id }"
        ></option>
      </select>
      <button class="btn" onclick="addTyppeDetail(this);"
              style="width: 20%;"
              th:id="'plus' + ${iterStat.count }"
              th:value="${baseType.id} + ',' + ${baseType.name}"
              type="button"
      >
        <img src="/imge/plus.png">
      </button>
    </td>
    <td>
      <input name="price" th:id="'price' + ${iterStat.count }" value=""/>
    </td>
    <td>
      <input name="description" th:id="'description' + ${iterStat.count }" value=""/>
    </td>
    <td>
      <button class="btn btn-success" th:onclick="'sub(' + ${iterStat.count } +')'" type="button">
        提交
      </button>
    </td>
    <td>
      <img src="/imge/ok.png" style="display: none;" th:id="'ok' + ${iterStat.count }"/>
      <img src="/imge/no.png" style="display: none;" th:id="'no' + ${iterStat.count }"/>
    </td>
  </tr>
</table>
<div id="addDetailView" style="display: none;
    border-radius: 10px;
    border-color: blue;
    border-style: solid;
    width: 25%;
    padding: 10px;
    align-content: center;
    margin: 0 auto;
    /* text-align: center; */
">
  <table>
    <tr>
      <td>类型</td>
      <td>
        <input disabled="disabled" id="addTypeId" style="width: 45%;" value="">
        <input disabled="disabled" id="addTypeName" style="width: 45%;" value="">
      </td>
    </tr>
    <tr>
      <td>详情</td>
      <td>
        <input id="typeDetailName" style="width: 90%;" value="">
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <button class="btn btn-success" onclick="submitDetail()" type="button">
          提交
        </button>
      </td>
    </tr>
  </table>
</div>
</body>
</html>

